<!--
 * @Author: Chuckie
 * @Email: chuckie@aliyun.com
 * @Date: 2022-11-10 14:35:49
 * @LastEditTime: 2022-11-12 14:32:09
 * @Description: 
 * @FilePath: /zl-web/src/views/basic/enterprise/detail.vue
 *  
-->
<template>
  <div class="app-container">
    <el-form :model="state.form" :rules="rules" label-width="120px">
      <!-- <el-form-item label="主键">
        <el-input v-model="state.form.id" />
      </el-form-item> -->

      <el-form-item :label="$t('systemUser.table.userName')" prop="username">
        <el-input v-model="state.form.username" />
      </el-form-item>

      <el-form-item :label="$t('systemUser.table.email')" prop="email">
        <el-input v-model="state.form.email" />
      </el-form-item>
      <el-form-item :label="$t('systemUser.detail.password')" prop="password">
        <el-input type="password" show-password v-model="state.form.password" />
      </el-form-item>

      <el-form-item :label="$t('systemUser.table.phone')" prop="phone">
        <el-input   v-model="state.form.phone" />
      </el-form-item>
      <el-form-item :label="$t('systemUser.table.sex')">
        <el-select v-model="state.form.sex">
          <el-option key="1" :value="1" :label="$t('systemUser.table.man')"></el-option>
          <el-option key="2" :value="2" :label="$t('systemUser.table.woman')"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('systemUser.table.age')">
        <el-input v-model="state.form.age" type="number" />
      </el-form-item>
      <el-form-item :label="$t('systemUser.table.state')">
        <el-select v-model="state.form.status">
          <el-option key="1" :value="1" :label="$t('systemConfig.table.enabled')"></el-option>
          <el-option key="2" :value="2" :label="$t('systemConfig.table.disabled')"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('systemUser.table.nickName')">
        <el-input v-model="state.form.nickname" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{$t('common.button.save')}}</el-button>
        <el-button @click="onCancel">{{$t('common.button.back')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { create, selectOne, update, BaseUser } from './api/base-user'

const route = useRoute()
const router = useRouter()

const { proxy }: any = getCurrentInstance()
const state = reactive({
  form: {
    sex: 1,
    status: 1,
    age: null
  } as BaseUser,
  dictProvince: { '0': '' },
  dictCity: { '0': '' },
  dictDistrict: { '0': '' },
  cities: <any>[],
  district: <any>[],
  dictCountry: {}
})

const onCancel = () => {
  router.back()
}

const validatePasswoed = (rule: any, value: any, callback: any) => {
  if (state.form.id === null || state.form.id === undefined) {
    if(value === ''){
      callback(new Error(proxy.$t('common.message.pleaseInput')))
    }
  } else {
    callback()
  }
}


const rules = reactive<FormRules>({
  username: [{ required: true, message: proxy.$t('common.message.pleaseInput'), trigger: 'blur' }],
  password: [{ validator:validatePasswoed, trigger: 'blur' }],
  email: [
    { required: true, message: proxy.$t('common.message.pleaseInput'), trigger: ['blur', 'change'] },
    { type: 'email', message:proxy.$t('common.message.formatError'), trigger: ['blur', 'change'] }
  ]
})
const onSubmit = async () => {
  if (route.params.id) {
    const data = await update(state.form)
    proxy.$message({ message: proxy.$t('common.message.editSuccessfully'), type: 'success' })
  } else {
    const data = await create(state.form)
    proxy.$message({ message: proxy.$t('common.message.saveSuccessfully'), type: 'success' })
    state.form = {}
  }
  router.back()
}

const onSelectOne = async (id: string) => {
  const data = await selectOne(id)
  state.form = { ...data.data }
  state.form.password = undefined
}

onMounted(() => {
  route.params.id && !Array.isArray(route.params.id) && onSelectOne(route.params.id)
})
</script>

<style lang="scss" scoped>
.el-input {
  width: 300px;
}

.el-select {
  width: 300px;
}

.el-textarea {
  width: 300px;
}
</style>
